// Custom select
//
// Apply `.select` to any `<select>` element for custom styles.
.form-select {
  display: inline-block;
  max-width: 100%;
  height: $size-5;
  padding-right: $spacer-4;
  background-color: $bg-white;
  background-image: url("");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 8px 10px;
  appearance: none;

  // Hides the default caret in IE11
  &::-ms-expand {
    opacity: 0;
  }

  &[multiple] {
    height: auto;
  }
}

.select-sm {
  height: $size-4;
  // stylelint-disable-next-line primer/spacing
  padding-top: 3px;
  // stylelint-disable-next-line primer/spacing
  padding-bottom: 3px;
  font-size: $font-size-small;

  &[multiple] {
    height: auto;
    min-height: 0;
  }
}
